<template>
  <div class="testcase">
    <el-row>
      <el-col>
        <el-popover placement="right" :width="400" trigger="click">
          <template #reference>
            <el-button class="disbutton">
              贡献规则
              <el-icon :size="16">
                <QuestionFilled />
              </el-icon>
            </el-button>
          </template>
          <div>
            <div>感谢您为这道题贡献测试点！</div>
            <div>测试点贡献约束，同时满足以下条件的题目可提交测试点：</div>
            <div>N测=当前题目测试点数</div>
            <div>N审=当前题目待审核测试点数</div>
            <div>1）N测小于等于30；</div>
            <div>2）N审小于等于(30-N测)*2</div>
            <div>3）其他极个别特殊情况</div>
            <div>注：</div>
            <div>该题测试点若有Subtask，新补充的测试点会统一分配到单独的统一一个Subtask中；</div>
            <div>如有特殊要求请在提交备注中说明。</div>
          </div>
        </el-popover>
      </el-col>
    </el-row>
    <div class="h33" v-show="ac.length">参考题解</div>
    <div class="ex1" :style="{ marginBottom: '12px' }">以下题解来源于网络，仅可作为生成测试点参考用，非官方标准题解、非标准答案。</div>
    <ul v-show="ac.length" class="list-group list-group-horizontal">
      <li @click="acindex = i" v-for="(v, i) in ac" :key="i" class="list-group-item"
        :style="{ backgroundColor: acindex === i ? '#fff' : '#f5f5f5' }">题解{{ i + 1 }}</li>
    </ul>
    <div v-show="ac.length" class="pre">
      <pre :style="{ borderSize: '0px' }" :class="'language-' + language">
    <code>{{ context }}</code>
  </pre>
    </div>

    <div class="h33">
      <el-popover placement="right" :width="400" trigger="click">
        <template #reference>
          <el-button class="disbutton">
            测试点录入
            <el-icon :size="16">
              <QuestionFilled />
            </el-icon>
          </el-button>
        </template>
        <div>
          <div>上传测试点文件要求：</div>
          <div>每一个测试点文件需要相同名称的两个文件,输入文件为.in，输出文件为.out或者.ans</div>
          <div>目前支持输入输出最大为1GM，后续会对部分题目开放更大空间</div>
        </div>
      </el-popover>
    </div>
    <el-row class="ex">
      <el-col class="ex1" :span="18">注1：目前支持输入输出最大为1GM，后续会对部分题目开放更大空间</el-col>
      <el-col :span="6" class="text-right">
        <el-upload :disabled="question?.testcases?.length > 30" action="/" :show-file-list="false" accept=".zip"
          :http-request="request" class="d-inline-block">
          <el-button size="default" type="primary" :disabled="question?.testcases?.length > 30">上传测试点</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-form ref="form" class="container-xl form-xl" :model="formrule" label-width="120px">
      <div class="row">
        <div class="col">输入</div>
        <div class="col">输出</div>
        <div :style="{ width: '48px' }">
          <el-icon class="el-icon-1" @click="usertest.push({ input: '', output: '' })">
            <Plus />
          </el-icon>
        </div>
      </div>
      <div class="row" :style="{ marginTop: '12px' }" v-for="(n, m) in usertest" :key="'1_' + m">
        <div class="col">
          <el-input :type="n.type ? 'text' : 'textarea'" v-model="n.input" :rows="5" :disabled="n.type"
            placeholder="输入"></el-input>
        </div>
        <div class="col">
          <el-input :type="n.type ? 'text' : 'textarea'" v-model="n.output" :rows="5" :disabled="n.type"
            placeholder="输入"></el-input>
        </div>
        <div :style="{ width: '48px' }">
          <el-icon class="el-icon-2" @click="usertest.splice(m, 1)">
            <Minus />
          </el-icon>
        </div>
      </div>
      <div class="m-mt-6 m-mb-3">备注</div>
      <div>
        <el-input type="textarea" v-model="usercont" :rows="2"></el-input>
      </div>
    </el-form>
    <el-row>
      <el-col :span="12"></el-col>
      <el-col :span="12" class="text-right">
        <el-button size="default" type="primary" @click="submit" v-show="question?.testcases?.length < 30"
          :disabled="question?.testcases?.length > 30">提交审核
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { Minus, Plus, QuestionFilled } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import highlight from "highlight.js";
import {
  computed,
  nextTick,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import { asynccreatequestiontestcasesuser, asyncselectaccepted } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { updatezip } from "../../../util/updateoss";
interface Iusertest extends Studycodemodel.Iquestiontestcasesuser { }
const p = defineProps<{ ID: number, question: Studycodemodel.Iquestion }>()
const Store = useStore(Storekey);
const user = computed(() => {
  return Store.state.user;
});
const formrule = reactive({});
const usercont = ref("");
const count = ref(0);
const ac = ref<Studycodemodel.Iaccepted[]>([]);
const usertest = ref<Iusertest[]>([{ input: "", output: "" }]);
async function start() {
  usertest.value = [{ input: "", output: "" }];
  usercont.value = "";
  const data = await asyncselectaccepted({
    questionid: p.ID,
  });
  count.value = data.count;
  ac.value = data.rows;
  nextTick(() => {
    highlight.highlightAll()
  })
}
const acindex = ref(0);
const context = computed(() => {
  return ac.value[acindex.value]?.context;
});
const language = computed(() => {
  return ac.value[acindex.value]?.language || 'cpp'
});

watch(() => acindex.value, e => {
  nextTick(() => {
    highlight.highlightAll()
  })
})

watch(() => p.ID, start);
async function request(file: { file: File }, c: Function) {
  const { size } = file.file;
  if (size > 1024 * 1024 * 1024) {
    ElMessage.error("上传文件过大，最大只能上传1GB");
    return;
  }
  ElNotification({
    title: "解压",
    message: "开始解压",
    type: "info",
  });

  const data = await updatezip(file.file);
  data.forEach((e) => {
    const { input, output } = e;
    usertest.value.push({
      input,
      output,
      userid: user.value?.ID,
      questionid: p.ID,
      type: "url",
    });
  });
  ElNotification({
    title: "解压",
    message: "解压成功",
    type: "success",
  });
  c("a.zip");
}
onMounted(() => {
  start();
});

function submit() {
  ElMessageBox.confirm("确定要提交？", "info", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "info",
  })
    .then(() => {
      const data: Studycodemodel.Iquestiontestcasesuser[] = [];
      usertest.value.forEach((e) => {
        const { ...t } = e;
        if (e.input && e.output) {
          t.context = usercont.value;
          t.questionid = p.ID;
          t.userid = user.value?.ID;
          data.push(t);
        }
      });
      if (data.length) {
        asynccreatequestiontestcasesuser({ questiontestcasesuser: data })
          .then((n) => {
            ElMessage.success("提交成功");
            start();
          })
          .catch((n) => {
            ElMessage.error(n);
          });
      } else {
        ElMessage.success("请填写测试点");
      }

    })
    .catch(() => { });
}
</script>

<style scoped>
.context1 {
  border: 1px solid #d9d9d9;
}

.list-group-item {
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-right: 1px solid #d9d9d9;
  cursor: pointer;
  background-color: #f5f5f5;
}

.list-group-item:hover {
  background-color: #fff;
}

.list-group-horizontal {
  width: 100%;
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-bottom: none;
  border-right: 1px solid #d9d9d9;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  overflow-x: auto;
}

.testcase {
  padding: 15px;
}

.testcase .pre {
  border-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  padding: 12px;

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.testcase pre {
  border: none;
  background-color: #f5f5f5;
}

.h33 {
  font-size: 18px;
  color: var(--color-43);
  margin-top: 24px;
  margin-bottom: 12px;
}

.ex {
  margin-bottom: 12px;
}

.ex1 {
  font-size: 12px;
  color: #8c8c8c;
}

.form-xl {
  border: 1px solid #d9d9d9;
  /* Depth 4 */

  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.el-form .row {
  --bs-gutter-x: 24px;
}

.el-icon-1 {
  width: 24px;
  height: 24px;
  background-color: var(--color-cheng);
  line-height: 24px;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.el-icon-2 {
  width: 24px;
  height: 24px;
  background-color: #d9d9d9;
  line-height: 24px;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}

.disbutton {
  border: none;
  background-color: #f5f5f5;
  --el-button-hover-color: "#000";
  --el-button-hover-background-color: #f5f5f5;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
}
</style>